<form nz-form name="form" [formGroup]="validateForm" (ngSubmit)="onSubmit()">
  <nz-form-item>
    <nz-form-label [nzSpan]="4"> user name </nz-form-label>
    <nz-form-control nzHasFeedback [nzSpan]="20" nzErrorTip=" Please enter a user name " >
      <nz-input-group [nzSuffix]="suffixUsername">
        <input nz-input placeholder=" Please enter a user name " name="username" formControlName="username" required />
      </nz-input-group>
      <ng-template #suffixUsername>
        <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="validateForm.controls.username.value.length>0" (click)="validateForm.controls.username.setValue('')" ></i>
      </ng-template>

    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4"> The secret &nbsp;&nbsp;&nbsp;&nbsp; code </nz-form-label>
    <nz-form-control nzHasFeedback [nzSpan]="20" nzErrorTip=" Please input a password " >
      <nz-input-group [nzSuffix]="suffixPassword">
        <input nz-input name="password" formControlName="password" [type]="passwordVisible ? 'text' : 'password'" placeholder=" Please input a password " required />
      </nz-input-group>
      <ng-template #suffixPassword>
        <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="validateForm.controls.password.value.length>0" (click)="validateForm.controls.password.setValue('')" ></i>
        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible" ></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzSpan]="20" [nzOffset]="4">
      <div nz-row class="login-form-margin">
        <div nz-col [nzSpan]="12">
          <label nz-checkbox formControlName="remember">
            <span> Remember me </span>
          </label>
        </div>
        <div nz-col [nzSpan]="12" style="text-align: right;">
          <a class="login-form-forgot"> Forget the password ?</a>
        </div>
      </div>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzSpan]="24" [nzOffset]="0" style="text-align: center;">
      <button type="submit" nz-button style="width: 100px;" nzType="primary" ng-disabled="form.$invalid" > Sign in </button>
    </nz-form-control>
  </nz-form-item>
</form>
